<script lang="tsx" setup>
/**
 * 设备月稼动率排行榜
 */
import {nextTick, ref, watch} from "vue"

/**
 * 定义props
 */
const props = defineProps<{
  deviceRateData: any
}>()

/**
 * 列表数据
 */
const list: any = ref([])

/**
 * 获取数据
 */
const getData = (value: any[]) => {
  list.value = [
    {
      index: `NO.01`,
      deviceName: "B20",
      rate: 85,
      active: 16,
      normal: 2
    },
    {
      index: `NO.02`,
      deviceName: "B21",
      rate: 85,
      active: 16,
      normal: 2
    },
    {
      index: `NO.03`,
      deviceName: "A03",
      rate: 84,
      active: 15,
      normal: 3
    },
    {
      index: `NO.04`,
      deviceName: "A02",
      rate: 81,
      active: 15,
      normal: 3
    }
  ]
}

/**
 * 监视
 */
watch(() => props.deviceRateData, (newValue) => {
  if (newValue) {
    nextTick(() => {
      getData(newValue)
    })
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="production-task-progress">
    <div class="title-box">
      <div class="title-img">
        <img alt="" class="title-img-logout" src="/img/data-cockpit/item-title.png"/>
      </div>
      <div class="title">
        <div class="title-content">设备稼动率排行榜</div>
      </div>
    </div>
    <div class="table">
      <div v-for="(item,index) in list" :key="index" class="table-body">
        <div class="row">
          <div class="td">{{ item.index }}</div>
          <div class="td">{{ item.deviceName }}</div>
          <div class="td">
            <img
                :src="item.rate >= 5 ? '/img/data-cockpit/device-rate/icon-start-active.png' : '/img/data-cockpit/device-rate/icon-start.png'"
                alt="" class="td-img"/>
            <img
                v-for="memo in item.active"
                alt="" class="td-img" src="/img/data-cockpit/device-rate/icon-middle-active.png"/>
            <img
                v-for="memo in item.normal"
                alt="" class="td-img" src="/img/data-cockpit/device-rate/icon-middle.png"/>
            <img
                :src="item.rate > 95 ? '/img/data-cockpit/device-rate/icon-end-active.png' : '/img/data-cockpit/device-rate/icon-end.png'"
                alt="" class="td-img"/>
          </div>
          <div class="td">{{ item.rate }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>